<template>
  <div id="building">
    <div class="dowebok"
         ref="dowebok">
      <!-- 注册界面 -->
      <div class="form-container sign-up-container">
        <el-form :model="registerForm"
                 :rules="registerFormRules"
                 ref="registerForm">
          <h1>注册</h1>
          <!-- 第三方图标 -->
          <div class="social-container">
            <a @click.prevent="test()"
               class="social"><i class="fab fa-facebook-f"></i></a>
            <a @click.prevent="test()"
               class="social"><i class="fab fa-google-plus-g"></i></a>
            <a @click.prevent="test()"
               class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>或使用邮箱注册</span>
          <!-- 输入框 -->
          <el-form-item prop="username">
            <el-input v-model="registerForm.username"
                      placeholder="用户名称"></el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="registerForm.email"
                      placeholder="电子邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password"
                      placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item prop="repassword">
            <el-input v-model="registerForm.repassword"
                      placeholder="确认密码"></el-input>
          </el-form-item>

          <a @click.prevent="test()"
             class="a">发送验证码</a>
          <el-button @click="register('registerForm')">注册</el-button>
        </el-form>
      </div>

      <!-- 登录界面 -->
      <div class="form-container sign-in-container">
        <el-form :model="loginForm"
                 :rules="loginFormRules"
                 ref="loginForm">
          <h1>登录</h1>
          <!-- 第三方图标 -->
          <div class="social-container">
            <a @click.prevent="test()"
               class="social"><i class="fab fa-facebook-f"></i></a>
            <a @click.prevent="test()"
               class="social"><i class="fab fa-google-plus-g"></i></a>
            <a @click.prevent="test()"
               class="social"><i class="fab fa-linkedin-in"></i></a>
          </div>
          <span>或使用您的帐号</span>
          <!-- 输入框 -->
          <el-form-item prop="email">
            <el-input v-model="loginForm.email"
                      placeholder="电子邮箱"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password"
                      placeholder="密码"></el-input>
          </el-form-item>
          <a @click.prevent="test()"
             class="a">忘记密码？</a>
          <el-button @click="Login('loginForm')">登录</el-button>
        </el-form>
      </div>
      <!-- 注册界面左端 -->
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>已有帐号？</h1>
            <p>请使用您的帐号进行登录</p>
            <button class="ghost"
                    ref="signIn"
                    @click="signIn()">登录</button>
          </div>
          <!-- 登录界面右端 -->
          <div class="overlay-panel overlay-right">
            <h1>没有帐号？</h1>
            <p>立即注册加入我们，和我们一起开始旅程吧</p>
            <button class="ghost"
                    ref="signUp"
                    @click="signUp()">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default ({
  name: 'Login',
  data () {
    // 验证邮箱的规则
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/ // 验证邮箱的正则表达式
      if (regEmail.test(value)) {
        return callback() // 合法邮箱
      }
      // 返回一个错误提示
      callback(new Error('请输入合法的邮箱'))
    }
    return {
      loginLoading: false, // 登录限制
      loginForm: {
        // 登录的表单数据的绑定对象
        email: '',
        password: ''
      },
      loginFormRules: {
        // 验证电子邮箱是否合法
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      },
      registerForm: {
        // 登录的表单数据的绑定对象
        username: '',
        email: '',
        password: '',
        repassword: ''
      },
      registerFormRules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名称长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证电子邮箱是否合法
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ],
        // 确认验证密码是否合法
        repassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted () {
    var loginOrRegister = this.$router.history.current.fullPath.split('?')[1]
    if (loginOrRegister === '2') {
      this.$refs.dowebok.classList.add('right-panel-active')
    }
  },
  methods: {
    Login (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message({
            message: '登录成功！！',
            type: 'success'
          })
          this.$router.push('/home')
        } else {
          this.$message.error('登录失败，请检查您的账户与密码是否正确！！')
          return false
        }
      })
    },
    register (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message({
            message: '注册成功，即将登录！！',
            type: 'success'
          })
          this.$refs.dowebok.classList.remove('right-panel-active')
        } else {
          this.$message.error('注册失败！！')
          return false
        }
      })
    },
    signIn () {
      this.$refs.dowebok.classList.remove('right-panel-active')
    },
    signUp () {
      this.$refs.dowebok.classList.add('right-panel-active')
    },
    test () {
      console.log('Hello World!')
    }
  }
})
</script>

<style lang="less" scoped>
@import '../../assets/css/login.css';
#building {
  background: url(../../assets/images/bg-01.jpg);
  width: 100%; //大小设置为100%
  height: 100%; //大小设置为100%
  position: fixed;
  background-size: 100% 100%;
  margin-left: -9px;
  margin-top: -9px;
}
* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #f6f5f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 96vh;
}

h1 {
  font-weight: bold;
  margin: 0;
}
.a:link,
.a:visited {
  color: grey;
  text-decoration: none;
}

.a:hover,
.a:active {
  color: blue;

  text-decoration: underline;
}
.a {
  margin-top: -10px;
}
span {
  margin-bottom: 10px;
}
p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin: 20px 0 20px;
}

span {
  font-size: 12px;
}

a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

.dowebok {
  margin-top: 8%;
  margin-left: 25%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
}

.form-container form {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 50px;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
}

.social-container a:hover {
  background-color: #eee;
}

#btn {
  background: paleturquoise;
  border-radius: 18px;
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 70%;
  outline: none;
  cursor: pointer;
}

#btn:hover {
  background-color: #4caf50;
  color: white;
}

button {
  border-radius: 20px;
  border: 1px solid #ff4b2b;
  background: #ff4b2b;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  cursor: pointer;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline: none;
}

button.ghost {
  background: transparent;
  border-color: #fff;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.sign-up-container {
  left: 0;
  width: 50%;
  z-index: 1;
  opacity: 0;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
}

.overlay {
  background: #ff416c;
  background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
  color: #fff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateY(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-panel {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  height: 100%;
  width: 50%;
  text-align: center;
  transform: translateY(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-right {
  right: 0;
  transform: translateY(0);
}

.overlay-left {
  transform: translateY(-20%);
}

/* Move signin to right */
.dowebok.right-panel-active .sign-in-container {
  transform: translateY(100%);
}

/* Move overlay to left */
.dowebok.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

/* Bring signup over signin */
.dowebok.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

/* Move overlay back to right */
.dowebok.right-panel-active .overlay {
  transform: translateX(50%);
}

/* Bring back the text to center */
.dowebok.right-panel-active .overlay-left {
  transform: translateY(0);
}

/* Same effect for right */
.dowebok.right-panel-active .overlay-right {
  transform: translateY(20%);
}
</style>
